<template>
  <div class="app-container">
    <div class="head-container">
      <el-button @click="toForm(null,'0')"
                 type="primary"
                 size="small"
                 icon="el-icon-plus">新增</el-button>
    </div>

    <el-table :data="userData"
              border
              v-loading="loading"
              height="700"
              style="width:100%">
      <el-table-column label="id"
                       prop="id"
                       width="100"
                       align="center" />
      <el-table-column label="账号"
                       prop="username"
                       align="center" />
      <el-table-column label="角色名"
                       prop="name"
                       align="center" />
      <el-table-column label="姓名"
                       prop="nick_name"
                       align="center" />
      <el-table-column label="所属渠道名称"
                       prop="chnl_name"
                       align="center" />
      <el-table-column label="操作"
                       align="center"
                       width="250">
        <template slot-scope="scope">
          <div>
            <el-button type="warning"
                       icon="el-icon-edit"
                       size="small"
                       @click="toForm(scope.row.id, '0')">编辑</el-button>
            <el-button type="danger"
                       icon="el-icon-delete"
                       size="small"
                       :loading="delLoading"
                       @click="handleDelete(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page.sync="page"
                   :page-size="size"
                   layout="total, prev, pager, next"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getAllUser, delUser } from '@/api/auth'
export default {
  name: 'UserMng',
  props: {
    activeName: {
      type: String,
      default: '1'
    },
  },
  data() {
    return {
      delLoading: false,
      loading: false,
      page: 0,
      size: 10,
      total: 0,
      userData: []
    }
  },
  created() {
    this.initData(0)
  },
  methods: {
    initData(page) {
      const params = {
        uuid: window.sessionStorage.getItem('uuid'),
        page: page,
        size: this.size
      }
      this.loading = true
      getAllUser(params).then(res => {
        if (res.publicData.retInfo.retType === 0) {
          this.userData = res.data.results
          this.total = res.data.count
        } else {
          this.$notify.error(res.publicData.retInfo.retMsg)
        }
        this.loading = false
      })
    },
    handleUpdate() { },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          uuid: window.sessionStorage.getItem('uuid'),
          user_id: id
        }
        this.delLoading = true
        delUser(params).then(res => {
          if (res.publicData.retInfo.retType === 0) {
            this.$notify.success(res.publicData.retInfo.retMsg)
            this.initData(0)
          }
          this.delLoading = false
          this.visible = false
        }).catch(e => {
          this.delLoading = false
          this.visible = false
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })

    },
    handleSizeChange(val) { },
    handleCurrentChange(val) { },
    toForm(id, isEdit) {
      this.$router.push({
        path: '/userForm',
        query: {
          id: id,
          isEdit: isEdit,
          activeName: this.activeName
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
</style>